<template>
  <div class="app-container">
    <vxe-form
      :data="formData"
      @submit="onSearchBtnClick"
      @reset="onSearchBtnClick"
    >
      <vxe-form-item
        field="code"
        :item-render="{
          name: 'input',
          attrs: { placeholder: $t('dic.searchCode') },
        }"
      />
      <vxe-form-item
        field="value"
        :item-render="{
          name: 'input',
          attrs: { placeholder: $t('dic.searchValue') },
        }"
      />
      <vxe-form-item
        :item-render="{
          name: '$buttons',
          children: [
            {
              props: {
                type: 'submit',
                content: 'common.select',
                status: 'primary',
              },
            },
            {
              props: { type: 'reset', content: 'common.reset' },
            },
          ],
        }"
      />
    </vxe-form>
    <!-- 字典列表 -->
    <el-row :gutter="10">
      <el-col
        :xs="24"
        :sm="24"
        :md="10"
        :lg="11"
        :xl="11"
        style="margin-bottom: 10px"
      >
        <vxe-toolbar >
          <template v-slot:buttons>
            <vxe-button
              v-auth="['admin', 'dic:add']"
              size="medium"
              icon="el-icon-circle-plus-outline"
              status="primary"
              content="common.add"
              @click="onAddBtnClick"
            />
            <vxe-button
              v-auth="['admin', 'dic:delete']"
              size="medium"
              icon="el-icon-delete"
              status="danger"
              :disabled="!multipleSelection.length"
              content="common.delete"
              @click="onDeleteBtnClick"
            />
          </template>
        </vxe-toolbar>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span"> {{ $t('dic.list') }}</span>
          </div>
          <vxe-table
            ref="table"
            border
            resizable
            size="mini"
            :loading="loading"
            highlight-current-row
            :data="tableData"
            @checkbox-all="selectAllEvent"
            @checkbox-change="selectChangeEvent"
            @cell-click="onTableclick"
            align="left"
            show-overflow
            show-header-overflow
          >
            <vxe-table-column type="checkbox" width="50" align="center" />
            <vxe-table-column field="code" title="字典编码" width="125" />
            <vxe-table-column field="value" title="字典值" width="125" />
            <vxe-table-column field="description" title="描述" width="125" />
            <vxe-table-column
              title="操作"
              width="100"
              align="center"
              fixed="right"
            >
              <template v-slot="{ row }">
                <vxe-button
                  v-auth="['admin', 'dic:update']"
                  size="mini"
                  icon="el-icon-edit"
                  status="primary"
                  @click="onEditBtnClick(row)"
                />
              </template>
            </vxe-table-column>
          </vxe-table>
        </el-card>
        <vxe-pager
          :current-page.sync="formData.currentPage"
          :page-size.sync="formData.pageSize"
          :total="total"
          :page-sizes="[10, 20, 100, 200]"
          :layouts="[
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'Sizes',
            'FullJump',
            'Total',
          ]"
          @page-change="handlePageChange"
        />
      </el-col>
      <!-- 字典详情列表 -->
      <el-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13">
        <vxe-toolbar>
          <template v-slot:buttons>
            <vxe-button
              v-auth="['admin', 'role:add']"
              size="medium"
              icon="el-icon-circle-plus-outline"
              status="primary"
              @click="onAddDetailBtnClick"
              >新增</vxe-button
            >
            <vxe-button
              v-auth="['admin', 'dic:delete']"
              size="medium"
              icon="el-icon-delete"
              status="danger"
              :disabled="!multipleDetailSelection.length"
              @click="onDeleteDetailBtnClick"
              >删除</vxe-button
            >
          </template>
        </vxe-toolbar>
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">明细列表</span>
          </div>
          <vxe-table
            ref="tableDetail"
            border
            resizable
            size="mini"
            :data="tableDetailData"
            @checkbox-all="selectDetailAllEvent"
            @checkbox-change="selectDetailChangeEvent"
            align="left"
            show-overflow
            show-header-overflow
          >
            <vxe-table-column type="checkbox" width="50" align="center" />
            <vxe-table-column field="code" title="明细编码" width="150" />
            <vxe-table-column field="value" title="明细值" width="150" />
            <vxe-table-column
              title="操作"
              width="100"
              align="center"
              fixed="right"
            >
              <template v-slot="{ row }">
                <el-tooltip content="编辑" placement="bottom" effect="light">
                  <vxe-button
                    v-auth="['admin', 'role:update']"
                    size="mini"
                    icon="el-icon-edit"
                    status="primary"
                    @click="onEditDetailBtnClick(row)"
                  />
                </el-tooltip>
              </template>
            </vxe-table-column>
          </vxe-table>
        </el-card>
      </el-col>
    </el-row>
    <Form v-if="detail" v-model="detail" />
    <Detail v-if="details" v-model="details" />
  </div>
</template>
<script>
import { dics, del } from '@/api/dic'
import { details, deletes } from '@/api/detail'
import Form from './form'
import Detail from './detail'
export default {
  components: {
    Form,
    Detail
  },
  data() {
    return {
      loading: false,
      formData: {
        currentPage: 1,
        pageSize: 20
      },
      tableData: [],
      tableDetailData: [],
      multipleSelection: [],
      multipleDetailSelection: [],
      detail: null,
      details: null,
      total: 0,
      data: [],
      defaultProps: {
        children: 'childrens',
        label: 'name'
      },
      param: {},
      checked: [],
      roleId: ''
    }
  },
  created() {
    this.onSearchBtnClick()
  },
  methods: {
    selectAllEvent({ checked, records }) {
      this.multipleSelection = records
    },
    selectChangeEvent({ checked, records }) {
      this.multipleSelection = records
    },
    selectDetailAllEvent({ checked, records }) {
      this.multipleDetailSelection = records
    },
    selectDetailChangeEvent({ checked, records }) {
      this.multipleDetailSelection = records
    },
    onTableclick(row) {
      this.param.dicId = row.data[row.rowIndex].id
      details(this.param).then((data) => {
        this.tableDetailData = data
      })
    },
    onAddBtnClick() {
      this.detail = {}
    },
    onAddDetailBtnClick() {
      if (!this.param.dicId) {
        this.$notify({
          type: 'error',
          message: '请先选中字典'
        })
      } else {
        this.details = {}
      }
    },
    onEditBtnClick(row) {
      this.detail = row
    },
    onEditDetailBtnClick(row) {
      this.details = row
    },
    onSearchBtnClick() {
      this.loading = false
      dics(this.formData).then((data) => {
        this.tableData = data.list
        this.total = data.total
        this.loading = false
      })
    },
    onSearchDetailBtnClick() {
      details(this.param).then((data) => {
        this.tableDetailData = data
        this.loading = false
      })
    },
    onDeleteBtnClick() {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => this.deleteData())
    },
    async deleteData() {
      const selectRecords = this.$refs.table.getCheckboxRecords()
      await del(selectRecords.map((item) => item.id))
      this.$notify({
        type: 'success',
        message: '删除成功!'
      })
      this.onSearchBtnClick()
    },
    onDeleteDetailBtnClick() {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => this.deleteDetailData())
    },
    async deleteDetailData() {
      const selectRecords = this.$refs.tableDetail.getCheckboxRecords()
      await deletes(selectRecords.map((item) => item.id))
      this.$notify({
        type: 'success',
        message: '删除成功!'
      })
      this.multipleDetailSelection = []
      this.onSearchDetailBtnClick()
    },
    handlePageChange({ currentPage, pageSize }) {
      this.formData.currentPage = currentPage
      this.formData.pageSize = pageSize
      this.onSearchBtnClick()
    }
  }
}
</script>
